﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="KPIBreakDownForm.aspx.cs" Inherits="FBKPI.Forms.KPIBreakDownForm" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
        <script type="text/javascript">
            $(document).ready(function () {

                if ($("#txt_mode").val() != 'create') {
                    $("#btn_BrowseGroupKPI").hide();
                    $("#btn_BrowseCategoryKPI").hide();
                    $("#btn_BrowseTypeKPI").hide();
                    $("#btn_BrowseSubTypeKPI").hide();
                    
                    $("#txt_year").attr('readonly','readonly');

                }

                $("#divBrowseGroupKPI").hide();
                $("#divBrowseGroupKPI").dialog({ autoOpen: false, width: 900, height: 500, modal: true, resizable: false });
                $("#divBrowseCategoryKPI").hide();
                $("#divBrowseCategoryKPI").dialog({ autoOpen: false, width: 900, height: 500, modal: true, resizable: false });
                $("#divBrowseTypeKPI").hide();
                $("#divBrowseTypeKPI").dialog({ autoOpen: false, width: 900, height: 500, modal: true, resizable: false });
                $("#divBrowseSubTypeKPI").hide();
                $("#divBrowseSubTypeKPI").dialog({ autoOpen: false, width: 900, height: 500, modal: true, resizable: false });
                $("#divBrowseUOM").hide();
                $("#divBrowseUOM").dialog({ autoOpen: false, width: 900, height: 500, modal: true, resizable: false });
                $("#divBrowseUOMMax").hide();
                $("#divBrowseUOMMax").dialog({ autoOpen: false, width: 900, height: 500, modal: true, resizable: false });
                $("#divBrowseUOMMin").hide();
                $("#divBrowseUOMMin").dialog({ autoOpen: false, width: 900, height: 500, modal: true, resizable: false });
                $("#divBrowseKPIParent").hide();
                $("#divBrowseKPIParent").dialog({ autoOpen: false, width: 900, height: 500, modal: true, resizable: false });
                $("#divBrowseKPIReplacement").hide();
                $("#divBrowseKPIReplacement").dialog({ autoOpen: false, width: 900, height: 500, modal: true, resizable: false });

                if ($("#txt_groupkpi").val() == '') {
                    $("#btn_BrowseCategoryKPI").attr("disabled", true);
                }
                if ($("#txt_categorykpi").val() == '') {
                    $("#btn_BrowseTypeKPI").attr("disabled", true);
                }
                if ($("#txt_typekpi").val() == '') {
                    $("#btn_BrowseSubTypeKPI").attr("disabled", true);
                }
                if ($("#txt_uom").val() == '') {
                    $("#btn_BrowseUOMMax").attr("disabled", true);
                    $("#btn_BrowseUOMMin").attr("disabled", true);
                }

                $("#txt_replacementdate").datepicker({ dateFormat: 'dd/mm/yy' })

                $("#btn_save").click(function () {
                    var param = "?";
                    var isActive = 'false';
                    var weightenable = 'false';
                    var uomenable = 'false';

                    $('#form1 td input:checked').each(function () {
                        var $cb = $(this);
                        if ($cb.attr('id') == 'chk_active') {
                            isActive = 'true';
                        }
                        if ($cb.attr('id') == 'chk_weightenableflag') {
                            weightenable = 'true';
                        }
                        if ($cb.attr('id') == 'chk_uomenableflag') {
                            uomenable = 'true';
                        }
                    });

                    param = param + "action=save";
                    param = param + "&ID=" + $("#txt_id").val();
                    param = param + "&Description=" + $("#txt_description").val();
                    param = param + "&isActive=" + isActive;
                    param = param + "&weightEnable=" + weightenable;
                    param = param + "&uomEnable=" + uomenable;
                    param = param + "&GroupKPI=" + $("#txt_groupkpiid").val();
                    param = param + "&CategoryKPI=" + $("#txt_categorykpiid").val();
                    param = param + "&TypeKPI=" + $("#txt_typekpiid").val();
                    param = param + "&SubTypeKPI=" + $("#txt_subtypekpiid").val();
                    param = param + "&UOM=" + $("#txt_uomid").val();
                    param = param + "&UOMMax=" + $("#txt_uommaxid").val();
                    param = param + "&UOMMin=" + $("#txt_uomminid").val();
                    param = param + "&KPIParent=" + $("#txt_kpiparentid").val();
                    param = param + "&KPIReplacement=" + $("#txt_kpireplacementid").val();
                    param = param + "&Year=" + $("#txt_year").val();
                    param = param + "&Weight=" + $("#txt_weight").val();
                    param = param + "&Periode=" + $("#txt_periode").val();
                    param = param + "&Polarization=" + $("#txt_polarization").val();
                    param = param + "&TargetDescription=" + $("#txt_targetdescription").val();
                    param = param + "&ManualCalculation=" + $("#txt_manualcalculation").val();
                    param = param + "&CalculationType=" + $("#txt_calculationtype").val();
                    param = param + "&ReplacementDate=" + $("#txt_replacementdate").val();
                    param = param + "&ReplacementDescription=" + $("#txt_replacementdescription").val();
                    param = param + "&DetailInformation=" + $("#txt_detailinformation").val();
                    param = param + "&StrategicObjective=" + $("#txt_strategicobjective").val();
                    param = param + "&CurrUser=" + $("#txt_user").val();
                    ProcessRequest("KPIHandler.ashx" + param.replace("undefined", ""), "#divdetail", "#KPITable");
                    return false;
                });


                $("#btn_delete").click(function () {
                    if (confirm('Are you sure to delete this record?')) {
                        var param = "?";
                        param = param + "action=delete";
                        param = param + "&ID=" + $("#txt_id").val();
                        param = param + "&CurrUser=" + $("#txt_user").val();
                        ProcessRequest("KPIHandler.ashx" + param, "#divdetail", "#KPITable");
                        return false;
                    }
                    return false;
                });

                $("#btn_BrowseGroupKPI").click(function () {
                    $("#divBrowseGroupKPI").dialog("option", "title", '<span class="header-text">Select Group KPI</span>');
                    $("#divBrowseGroupKPI").dialog("open");
                    $('#groupkpi').dataTable({
                        "oLanguage": {
                            "sZeroRecords": "No records to display",
                            "sSearch": "Search"
                        },
                        "bSort": false,
                        "bPaginate": true,
                        "bAutoWidth": true,
                        "bProcessing": true,
                        "bServerSide": true,
                        "bDestroy": true,
                        "bJQueryUI": true,
                        "sPaginationType": "full_numbers",
                        "bDeferRender": true,
                        "fnServerData": function (sSource, aoData, fnCallback) {
                            $.ajax({
                                "dataType": 'json',
                                "type": "GET",
                                "url": "../Serializer/GroupKPISerializer.ashx",
                                "data": aoData,
                                "success": fnCallback
                            });
                        },
                        "aoColumns": [
                        { "mData": "No" },
                        { "mData": "Description" },
                        { "mData": "isActive" },
                        { "mData": "ID" }
                    ],
                        "aoColumnDefs":
                    [
                        { "fnRender":
                            function (oObj) {
                                return "<a href=\"#\" onclick=\"PickGroupKPI('" + oObj.aData["ID"] + "','" + oObj.aData["Description"] + "')\"><img src='../images/ok.png' /></a>";
                            },
                            "aTargets": [3]
                        },
                        { "sClass": "center", "aTargets": [0, 2, 3] },
                        { "fnRender":
                            function (oObj) {
                                if (oObj.aData["isActive"] == 'True') {
                                    return "<img src='../images/check.png' />"
                                }
                                else {
                                    return "<img src='../images/cross.png' />"
                                }
                            },
                            "aTargets": [2]
                        }
                    ]
                    });

                    //mark selected row
                    $('body').on("click", '#groupkpi tbody tr', function () {
                        $('#groupkpi tbody tr').removeClass("row_selected");
                        $(this).addClass("row_selected");
                    });
                    $(".dataTables_filter input").focus();
                    return false;
                });

                PickGroupKPI = function (GroupID, GroupDescription) {
                    $("#txt_groupkpi").val(GroupDescription);
                    $("#txt_groupkpiid").val(GroupID);
                    $("#divBrowseGroupKPI").dialog("close");
                    $("#btn_BrowseCategoryKPI").attr("disabled", false);
                }



                $("#btn_BrowseCategoryKPI").click(function () {
                    $("#divBrowseCategoryKPI").dialog("option", "title", '<span class="header-text">Select Category KPI</span>');
                    $("#divBrowseCategoryKPI").dialog("open");
                    $('#categorykpi').dataTable({
                        "oLanguage": {
                            "sZeroRecords": "No records to display",
                            "sSearch": "Search"
                        },
                        "bSort": false,
                        "bPaginate": true,
                        "bAutoWidth": true,
                        "bProcessing": true,
                        "bServerSide": true,
                        "bDestroy": true,
                        "bJQueryUI": true,
                        "sPaginationType": "full_numbers",
                        "bDeferRender": true,
                        "fnServerData": function (sSource, aoData, fnCallback) {
                            $.ajax({
                                "dataType": 'json',
                                "type": "GET",
                                "url": "../Serializer/CategoryKPIByGroupKPISerializer.ashx?GroupKPI=" + $("#txt_groupkpiid").val(),
                                "data": aoData,
                                "success": fnCallback
                            });
                        },
                        "aoColumns": [
                        { "mData": "No" },
                        { "mData": "Description" },
                        { "mData": "isActive" },
                        { "mData": "ID" }
                    ],
                        "aoColumnDefs":
                    [
                        { "fnRender":
                            function (oObj) {
                                return "<a href=\"#\" onclick=\"PickCategoryKPI('" + oObj.aData["ID"] + "','" + oObj.aData["Description"] + "')\"><img src='../images/ok.png' /></a>";
                            },
                            "aTargets": [3]
                        },
                        { "sClass": "center", "aTargets": [0, 2, 3] },
                        { "fnRender":
                            function (oObj) {
                                if (oObj.aData["isActive"] == 'True') {
                                    return "<img src='../images/check.png' />"
                                }
                                else {
                                    return "<img src='../images/cross.png' />"
                                }
                            },
                            "aTargets": [2]
                        }
                    ]
                    });

                    //mark selected row
                    $('body').on("click", '#categorykpi tbody tr', function () {
                        $('#categorykpi tbody tr').removeClass("row_selected");
                        $(this).addClass("row_selected");
                    });
                    $(".dataTables_filter input").focus();
                    return false;
                });

                PickCategoryKPI = function (CategoryID, CategoryDescription) {
                    $("#txt_categorykpi").val(CategoryDescription);
                    $("#txt_categorykpiid").val(CategoryID);
                    $("#divBrowseCategoryKPI").dialog("close");
                    $("#btn_BrowseTypeKPI").attr("disabled", false);
                }



                $("#btn_BrowseTypeKPI").click(function () {
                    $("#divBrowseTypeKPI").dialog("option", "title", '<span class="header-text">Select Type KPI</span>');
                    $("#divBrowseTypeKPI").dialog("open");
                    $('#typekpi').dataTable({
                        "oLanguage": {
                            "sZeroRecords": "No records to display",
                            "sSearch": "Search"
                        },
                        "bSort": false,
                        "bPaginate": true,
                        "bAutoWidth": true,
                        "bProcessing": true,
                        "bServerSide": true,
                        "bDestroy": true,
                        "bJQueryUI": true,
                        "sPaginationType": "full_numbers",
                        "bDeferRender": true,
                        "fnServerData": function (sSource, aoData, fnCallback) {
                            $.ajax({
                                "dataType": 'json',
                                "type": "GET",
                                "url": "../Serializer/TypeKPIByCategoryKPISerializer.ashx?CategoryKPI=" + $("#txt_categorykpiid").val(),
                                "data": aoData,
                                "success": fnCallback
                            });
                        },
                        "aoColumns": [
                        { "mData": "No" },
                        { "mData": "Description" },
                        { "mData": "isActive" },
                        { "mData": "ID" }
                    ],
                        "aoColumnDefs":
                    [
                        { "fnRender":
                            function (oObj) {
                                return "<a href=\"#\" onclick=\"PickTypeKPI('" + oObj.aData["ID"] + "','" + oObj.aData["Description"] + "')\"><img src='../images/ok.png' /></a>";
                            },
                            "aTargets": [3]
                        },
                        { "sClass": "center", "aTargets": [0, 2, 3] },
                        { "fnRender":
                            function (oObj) {
                                if (oObj.aData["isActive"] == 'True') {
                                    return "<img src='../images/check.png' />"
                                }
                                else {
                                    return "<img src='../images/cross.png' />"
                                }
                            },
                            "aTargets": [2]
                        }
                    ]
                    });

                    //mark selected row
                    $('body').on("click", '#typekpi tbody tr', function () {
                        $('#typekpi tbody tr').removeClass("row_selected");
                        $(this).addClass("row_selected");
                    });
                    $(".dataTables_filter input").focus();
                    return false;
                });

                PickTypeKPI = function (TypeID, TypeDescription) {
                    $("#txt_typekpi").val(TypeDescription);
                    $("#txt_typekpiid").val(TypeID);
                    $("#divBrowseTypeKPI").dialog("close");
                    $("#btn_BrowseSubTypeKPI").attr("disabled", false);
                }



                $("#btn_BrowseSubTypeKPI").click(function () {
                    $("#divBrowseSubTypeKPI").dialog("option", "title", '<span class="header-text">Select Sub Type KPI</span>');
                    $("#divBrowseSubTypeKPI").dialog("open");
                    $('#subtypekpi').dataTable({
                        "oLanguage": {
                            "sZeroRecords": "No records to display",
                            "sSearch": "Search"
                        },
                        "bSort": false,
                        "bPaginate": true,
                        "bAutoWidth": true,
                        "bProcessing": true,
                        "bServerSide": true,
                        "bDestroy": true,
                        "bJQueryUI": true,
                        "sPaginationType": "full_numbers",
                        "bDeferRender": true,
                        "fnServerData": function (sSource, aoData, fnCallback) {
                            $.ajax({
                                "dataType": 'json',
                                "type": "GET",
                                "url": "../Serializer/SubTypeKPIByTypeKPISerializer.ashx?TypeKPI=" + $("#txt_typekpiid").val(),
                                "data": aoData,
                                "success": fnCallback
                            });
                        },
                        "aoColumns": [
                        { "mData": "No" },
                        { "mData": "Description" },
                        { "mData": "isActive" },
                        { "mData": "ID" }
                    ],
                        "aoColumnDefs":
                    [
                        { "fnRender":
                            function (oObj) {
                                return "<a href=\"#\" onclick=\"PickSubTypeKPI('" + oObj.aData["ID"] + "','" + oObj.aData["Description"] + "')\"><img src='../images/ok.png' /></a>";
                            },
                            "aTargets": [3]
                        },
                        { "sClass": "center", "aTargets": [0, 2, 3] },
                        { "fnRender":
                            function (oObj) {
                                if (oObj.aData["isActive"] == 'True') {
                                    return "<img src='../images/check.png' />"
                                }
                                else {
                                    return "<img src='../images/cross.png' />"
                                }
                            },
                            "aTargets": [2]
                        }
                    ]
                    });

                    //mark selected row
                    $('body').on("click", '#subtypekpi tbody tr', function () {
                        $('#subtypekpi tbody tr').removeClass("row_selected");
                        $(this).addClass("row_selected");
                    });
                    $(".dataTables_filter input").focus();
                    return false;
                });

                PickSubTypeKPI = function (SubTypeID, SubTypeDescription) {
                    $("#txt_subtypekpi").val(SubTypeDescription);
                    $("#txt_subtypekpiid").val(SubTypeID);
                    $("#divBrowseSubTypeKPI").dialog("close");
                }

                $("#btn_BrowseUOM").click(function () {
                    $("#divBrowseUOM").dialog("option", "title", '<span class="header-text">Select Unit of Measure</span>');
                    $("#divBrowseUOM").dialog("open");
                    $('#uom').dataTable({
                        "oLanguage": {
                            "sZeroRecords": "No records to display",
                            "sSearch": "Search"
                        },
                        "bSort": false,
                        "bPaginate": true,
                        "bAutoWidth": true,
                        "bProcessing": true,
                        "bServerSide": true,
                        "bDestroy": true,
                        "bJQueryUI": true,
                        "sPaginationType": "full_numbers",
                        "bDeferRender": true,
                        "fnServerData": function (sSource, aoData, fnCallback) {
                            $.ajax({
                                "dataType": 'json',
                                "type": "GET",
                                "url": "../Serializer/UoMSerializer.ashx",
                                "data": aoData,
                                "success": fnCallback
                            });
                        },
                        "aoColumns": [
                        { "mData": "No" },
                        { "mData": "Description" },
                        { "mData": "isActive" },
                        { "mData": "ID" }
                    ],
                        "aoColumnDefs":
                    [
                        { "fnRender":
                            function (oObj) {
                                return "<a href=\"#\" onclick=\"PickUOM('" + oObj.aData["ID"] + "','" + oObj.aData["Description"] + "')\"><img src='../images/ok.png' /></a>";
                            },
                            "aTargets": [3]
                        },
                        { "sClass": "center", "aTargets": [0, 2, 3] },
                        { "fnRender":
                            function (oObj) {
                                if (oObj.aData["isActive"] == 'True') {
                                    return "<img src='../images/check.png' />"
                                }
                                else {
                                    return "<img src='../images/cross.png' />"
                                }
                            },
                            "aTargets": [2]
                        }
                    ]
                    });

                    //mark selected row
                    $('body').on("click", '#uom tbody tr', function () {
                        $('#uom tbody tr').removeClass("row_selected");
                        $(this).addClass("row_selected");
                    });
                    $(".dataTables_filter input").focus();
                    return false;
                });

                PickUOM = function (UOMID, UOMDescription) {
                    $("#txt_uom").val(UOMDescription);
                    $("#txt_uomid").val(UOMID);
                    $("#divBrowseUOM").dialog("close");
                    $("#btn_BrowseUOMMax").attr("disabled", false);
                    $("#btn_BrowseUOMMin").attr("disabled", false);
                    $("#txt_uommax").val('');
                    $("#txt_uommaxid").val('');
                    $("#txt_uommin").val('');
                    $("#txt_uomminid").val('');
                }



                $("#btn_BrowseUOMMax").click(function () {
                    $("#divBrowseUOMMax").dialog("option", "title", '<span class="header-text">Select UoM Max</span>');
                    $("#divBrowseUOMMax").dialog("open");
                    $('#uommax').dataTable({
                        "oLanguage": {
                            "sZeroRecords": "No records to display",
                            "sSearch": "Search"
                        },
                        "bSort": false,
                        "bPaginate": true,
                        "bAutoWidth": true,
                        "bProcessing": true,
                        "bServerSide": true,
                        "bDestroy": true,
                        "bJQueryUI": true,
                        "sPaginationType": "full_numbers",
                        "bDeferRender": true,
                        "fnServerData": function (sSource, aoData, fnCallback) {
                            $.ajax({
                                "dataType": 'json',
                                "type": "GET",
                                "url": "../Serializer/UoMDetailByUoMIDSerializer.ashx?UoM=" + $("#txt_uomid").val(),
                                "data": aoData,
                                "success": fnCallback
                            });
                        },
                        "aoColumns": [
                        { "mData": "No" },
                        { "mData": "Description" },
                        { "mData": "ListValue" },
                        { "mData": "isActive" },
                        { "mData": "ID" }
                    ],
                        "aoColumnDefs":
                    [
                        { "fnRender":
                            function (oObj) {
                                return "<a href=\"#\" onclick=\"PickUOMMax('" + oObj.aData["ID"] + "','" + oObj.aData["Description"] + "')\"><img src='../images/ok.png' /></a>";
                            },
                            "aTargets": [4]
                        },
                        { "sClass": "center", "aTargets": [0, 3, 4] },
                        { "fnRender":
                            function (oObj) {
                                if (oObj.aData["isActive"] == 'True') {
                                    return "<img src='../images/check.png' />"
                                }
                                else {
                                    return "<img src='../images/cross.png' />"
                                }
                            },
                            "aTargets": [3]
                        }
                    ]
                    });

                    //mark selected row
                    $('body').on("click", '#uommax tbody tr', function () {
                        $('#uommax tbody tr').removeClass("row_selected");
                        $(this).addClass("row_selected");
                    });
                    $(".dataTables_filter input").focus();
                    return false;
                });

                PickUOMMax = function (UOMID, UOMDescription) {
                    $("#txt_uommax").val(UOMDescription);
                    $("#txt_uommaxid").val(UOMID);
                    $("#divBrowseUOMMax").dialog("close");
                }



                $("#btn_BrowseUOMMin").click(function () {
                    $("#divBrowseUOMMin").dialog("option", "title", '<span class="header-text">Select UoM Min</span>');
                    $("#divBrowseUOMMin").dialog("open");
                    $('#uommin').dataTable({
                        "oLanguage": {
                            "sZeroRecords": "No records to display",
                            "sSearch": "Search"
                        },
                        "bSort": false,
                        "bPaginate": true,
                        "bAutoWidth": true,
                        "bProcessing": true,
                        "bServerSide": true,
                        "bDestroy": true,
                        "bJQueryUI": true,
                        "sPaginationType": "full_numbers",
                        "bDeferRender": true,
                        "fnServerData": function (sSource, aoData, fnCallback) {
                            $.ajax({
                                "dataType": 'json',
                                "type": "GET",
                                "url": "../Serializer/UoMDetailByUoMIDSerializer.ashx?UoM=" + $("#txt_uomid").val(),
                                "data": aoData,
                                "success": fnCallback
                            });
                        },
                        "aoColumns": [
                        { "mData": "No" },
                        { "mData": "Description" },
                        { "mData": "ListValue" },
                        { "mData": "isActive" },
                        { "mData": "ID" }
                    ],
                        "aoColumnDefs":
                    [
                        { "fnRender":
                            function (oObj) {
                                return "<a href=\"#\" onclick=\"PickUOMMin('" + oObj.aData["ID"] + "','" + oObj.aData["Description"] + "')\"><img src='../images/ok.png' /></a>";
                            },
                            "aTargets": [4]
                        },
                        { "sClass": "center", "aTargets": [0, 3, 4] },
                        { "fnRender":
                            function (oObj) {
                                if (oObj.aData["isActive"] == 'True') {
                                    return "<img src='../images/check.png' />"
                                }
                                else {
                                    return "<img src='../images/cross.png' />"
                                }
                            },
                            "aTargets": [3]
                        }
                    ]
                    });

                    //mark selected row
                    $('body').on("click", '#uommin tbody tr', function () {
                        $('#uommin tbody tr').removeClass("row_selected");
                        $(this).addClass("row_selected");
                    });
                    $(".dataTables_filter input").focus();
                    return false;
                });

                PickUOMMin = function (UOMID, UOMDescription) {
                    $("#txt_uommin").val(UOMDescription);
                    $("#txt_uomminid").val(UOMID);
                    $("#divBrowseUOMMin").dialog("close");
                }

                $("#btn_BrowseKPIParent").click(function () {
                    $("#divBrowseKPIParent").dialog("option", "title", '<span class="header-text">Select KPI</span>');
                    $("#divBrowseKPIParent").dialog("open");
                    $('#kpiparent').dataTable({
                        "oLanguage": {
                            "sZeroRecords": "No records to display",
                            "sSearch": "Search"
                        },
                        "bSort": false,
                        "bPaginate": true,
                        "bAutoWidth": true,
                        "bProcessing": true,
                        "bServerSide": true,
                        "bDestroy": true,
                        "bJQueryUI": true,
                        "sPaginationType": "full_numbers",
                        "bDeferRender": true,
                        "fnServerData": function (sSource, aoData, fnCallback) {
                            $.ajax({
                                "dataType": 'json',
                                "type": "GET",
                                "url": "../Serializer/KPISerializer.ashx?User=" + $("#txt_user").val() + "&Year=",
                                "data": aoData,
                                "success": fnCallback
                            });
                        },
                        "aoColumns": [
                        { "mData": "No" },
                        { "mData": "Description" },
                        { "mData": "isActive" },
                        { "mData": "ID" }
                    ],
                        "aoColumnDefs":
                    [
                        { "fnRender":
                            function (oObj) {
                                return "<a href=\"#\" onclick=\"PickKPIParent('" + oObj.aData["ID"] + "','" + oObj.aData["Description"] + "')\"><img src='../images/ok.png' /></a>";
                            },
                            "aTargets": [3]
                        },
                        { "sClass": "center", "aTargets": [0, 2, 3] },
                        { "fnRender":
                            function (oObj) {
                                if (oObj.aData["isActive"] == 'True') {
                                    return "<img src='../images/check.png' />"
                                }
                                else {
                                    return "<img src='../images/cross.png' />"
                                }
                            },
                            "aTargets": [2]
                        }
                    ]
                    });

                    //mark selected row
                    $('body').on("click", '#kpiparent tbody tr', function () {
                        $('#kpiparent tbody tr').removeClass("row_selected");
                        $(this).addClass("row_selected");
                    });
                    $(".dataTables_filter input").focus();
                    return false;
                });

                PickKPIParent = function (KPIParentID, KPIParentDescription) {
                    $("#txt_kpiparent").val(KPIParentDescription);
                    $("#txt_kpiparentid").val(KPIParentID);
                    $("#divBrowseKPIParent").dialog("close");
                }


                $("#btn_BrowseKPIReplacement").click(function () {
                    $("#divBrowseKPIReplacement").dialog("option", "title", '<span class="header-text">Select KPI</span>');
                    $("#divBrowseKPIReplacement").dialog("open");
                    $('#kpireplacement').dataTable({
                        "oLanguage": {
                            "sZeroRecords": "No records to display",
                            "sSearch": "Search"
                        },
                        "bSort": false,
                        "bPaginate": true,
                        "bAutoWidth": true,
                        "bProcessing": true,
                        "bServerSide": true,
                        "bDestroy": true,
                        "bJQueryUI": true,
                        "sPaginationType": "full_numbers",
                        "bDeferRender": true,
                        "fnServerData": function (sSource, aoData, fnCallback) {
                            $.ajax({
                                "dataType": 'json',
                                "type": "GET",
                                "url": "../Serializer/KPISerializer.ashx?User=" + $("#txt_user").val() + "&Year=",
                                "data": aoData,
                                "success": fnCallback
                            });
                        },
                        "aoColumns": [
                        { "mData": "No" },
                        { "mData": "Description" },
                        { "mData": "isActive" },
                        { "mData": "ID" }
                    ],
                        "aoColumnDefs":
                    [
                        { "fnRender":
                            function (oObj) {
                                return "<a href=\"#\" onclick=\"PickKPIReplacement('" + oObj.aData["ID"] + "','" + oObj.aData["Description"] + "')\"><img src='../images/ok.png' /></a>";
                            },
                            "aTargets": [3]
                        },
                        { "sClass": "center", "aTargets": [0, 2, 3] },
                        { "fnRender":
                            function (oObj) {
                                if (oObj.aData["isActive"] == 'True') {
                                    return "<img src='../images/check.png' />"
                                }
                                else {
                                    return "<img src='../images/cross.png' />"
                                }
                            },
                            "aTargets": [2]
                        }
                    ]
                    });

                    //mark selected row
                    $('body').on("click", '#kpireplacement tbody tr', function () {
                        $('#kpireplacement tbody tr').removeClass("row_selected");
                        $(this).addClass("row_selected");
                    });
                    $(".dataTables_filter input").focus();
                    return false;
                });

                PickKPIReplacement = function (KPIReplacementID, KPIReplacmentDescription) {
                    $("#txt_kpireplacement").val(KPIReplacmentDescription);
                    $("#txt_kpireplacementid").val(KPIReplacementID);
                    $("#divBrowseKPIReplacement").dialog("close");
                }
            });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="kpiformarea" class="ui-widget-content padding5px ui-corner-all">
            <table class="dialogTable" width="100%">
                <tr>
                    <td width="50%"><input type="hidden" id="txt_mode" runat="server"/>
                        <table>
                            <tr>
                                <td width="140px">ID</td>
                                <td class="Separator">:</td>
                                <td><asp:TextBox ID="txt_id" runat="server" ReadOnly="true"></asp:TextBox></td>
                            </tr>
                            <tr>
                                <td>Description</td>
                                <td>:</td>
                                <td><asp:TextBox ID="txt_description" runat="server" class="longText mandatory"></asp:TextBox></td>
                            </tr>
                            <tr>
                                <td>Group</td>
                                <td>:</td>
                                <td>
                                    <asp:TextBox ID="txt_groupkpi" runat="server" ReadOnly="true" class="longText mandatory"></asp:TextBox>
                                    <button id="btn_BrowseGroupKPI" class="ui-button ui-state-default">
                                        <span class="ui-button ui-icon ui-icon-newwin"></span>
                                    </button>
                                    <input type="hidden" id="txt_groupkpiid" runat="server" />
                                </td>
                            </tr>
                            <tr>
                                <td>Category</td>
                                <td>:</td>
                                <td>
                                    <asp:TextBox ID="txt_categorykpi" runat="server" ReadOnly="true" class="longText mandatory"></asp:TextBox>
                                    <button id="btn_BrowseCategoryKPI" class="ui-button ui-state-default">
                                        <span class="ui-button ui-icon ui-icon-newwin"></span>
                                    </button>
                                    <input type="hidden" id="txt_categorykpiid" runat="server" />
                                </td>
                            </tr>
                            <tr>
                                <td>Type</td>
                                <td>:</td>
                                <td>
                                    <asp:TextBox ID="txt_typekpi" runat="server" ReadOnly="true" class="longText mandatory"></asp:TextBox>
                                    <button id="btn_BrowseTypeKPI" class="ui-button ui-state-default">
                                        <span class="ui-button ui-icon ui-icon-newwin"></span>
                                    </button>
                                    <input type="hidden" id="txt_typekpiid" runat="server" />
                                </td>
                            </tr>
                            <tr>
                                <td>Sub Type</td>
                                <td>:</td>
                                <td>
                                    <asp:TextBox ID="txt_subtypekpi" runat="server" ReadOnly="true" class="longText mandatory"></asp:TextBox>
                                    <button id="btn_BrowseSubTypeKPI" class="ui-button ui-state-default">
                                        <span class="ui-button ui-icon ui-icon-newwin"></span>
                                    </button>
                                    <input type="hidden" id="txt_subtypekpiid" runat="server" />
                                </td>
                            </tr>
                            <tr>
                                <td>Year</td>
                                <td>:</td>
                                <td>
                                    <asp:TextBox ID="txt_year" runat="server" class="mandatory"></asp:TextBox>
                                </td>
                            </tr>            
                            <tr>
                                <td>Periode</td>
                                <td>:</td>
                                <td>
                                    <asp:TextBox ID="txt_periode" runat="server"></asp:TextBox>
                                </td>
                            </tr>          
                            <tr>
                                <td>Polarization</td>
                                <td>:</td>
                                <td>
                                    <asp:TextBox ID="txt_polarization" runat="server"></asp:TextBox>
                                </td>
                            </tr>          
                            <tr>
                                <td>Unit of Measure</td>
                                <td>:</td>
                                <td>
                                    <asp:TextBox ID="txt_uom" runat="server" ReadOnly="true" class="longText mandatory"></asp:TextBox>
                                    <button id="btn_BrowseUOM" class="ui-button ui-state-default">
                                        <span class="ui-button ui-icon ui-icon-newwin"></span>
                                    </button>
                                    <input type="hidden" id="txt_uomid" runat="server" />
                                </td>
                            </tr>                
                            <tr>
                                <td>UoM Max</td>
                                <td>:</td>
                                <td>
                                    <asp:TextBox ID="txt_uommax" runat="server" ReadOnly="true" class="longText mandatory"></asp:TextBox>
                                    <button id="btn_BrowseUOMMax" class="ui-button ui-state-default">
                                        <span class="ui-button ui-icon ui-icon-newwin"></span>
                                    </button>
                                    <input type="hidden" id="txt_uommaxid" runat="server" />
                                </td>
                            </tr>          
                            <tr>
                                <td>UoM Min</td>
                                <td>:</td>
                                <td>
                                    <asp:TextBox ID="txt_uommin" runat="server" ReadOnly="true" class="longText mandatory"></asp:TextBox>
                                    <button id="btn_BrowseUOMMin" class="ui-button ui-state-default">
                                        <span class="ui-button ui-icon ui-icon-newwin"></span>
                                    </button>
                                    <input type="hidden" id="txt_uomminid" runat="server" />
                                </td>
                            </tr>              
                        </table>
                    </td>
                    <td width="50%">

                        <table>
                            <tr>
                                <td width="140px">Target Description</td>
                                <td class="Separator">:</td>
                                <td>
                                    <asp:TextBox ID="txt_targetdescription" runat="server" class="longText"></asp:TextBox>
                                </td>
                            </tr>
                            <tr>
                                <td>Manual Calculation</td>
                                <td>:</td>
                                <td><asp:TextBox ID="txt_manualcalculation" runat="server"></asp:TextBox></td>
                            </tr>
                            <tr>
                                <td>Calculation Type</td>
                                <td>:</td>
                                <td>
                                    <asp:TextBox ID="txt_calculationtype" runat="server"></asp:TextBox>
                                </td>
                            </tr>
                            <tr>
                                <td>Weight</td>
                                <td>:</td>
                                <td><asp:TextBox ID="txt_weight" runat="server" class="mandatory"></asp:TextBox></td>
                            </tr>
                            <tr>
                                <td>KPI Parent</td>
                                <td>:</td>
                                <td>
                                    <asp:TextBox ID="txt_kpiparent" runat="server" ReadOnly="true" class="longText"></asp:TextBox>
                                    <button id="btn_BrowseKPIParent" class="ui-button ui-state-default">
                                        <span class="ui-button ui-icon ui-icon-newwin"></span>
                                    </button>
                                    <input type="hidden" id="txt_kpiparentid" runat="server" />
                                </td>
                            </tr>
                            <tr>
                                <td>KPI Replacement</td>
                                <td>:</td>
                                <td>
                                    <asp:TextBox ID="txt_kpireplacement" runat="server" ReadOnly="true" class="longText"></asp:TextBox>
                                    <button id="btn_BrowseKPIReplacement" class="ui-button ui-state-default">
                                        <span class="ui-button ui-icon ui-icon-newwin"></span>
                                    </button>
                                    <input type="hidden" id="txt_kpireplacementid" runat="server" />
                                </td>
                            </tr>
                            <tr>
                                <td>Replacement Date</td>
                                <td>:</td>
                                <td><asp:TextBox ID="txt_replacementdate" runat="server" ReadOnly="true"></asp:TextBox></td>
                            </tr>
                            <tr>
                                <td>Replacement Desc.</td>
                                <td>:</td>
                                <td><asp:TextBox ID="txt_replacementdescription" runat="server"></asp:TextBox></td>
                            </tr>
                            <tr>
                                <td>Weight Enable Flag</td>
                                <td>:</td>
                                <td>
                                    <asp:CheckBox ID="chk_weightenableflag" runat="server"/>
                                </td>
                            </tr>
                            <tr>
                                <td>UoM Enable Flag</td>
                                <td>:</td>
                                <td>
                                    <asp:CheckBox ID="chk_uomenableflag" runat="server"/>
                                </td>
                            </tr>
                            <tr>
                                <td>Detail Information</td>
                                <td>:</td>
                                <td><asp:TextBox ID="txt_detailinformation" runat="server" class="longText"></asp:TextBox></td>
                            </tr>
                            <tr>
                                <td>Strategic Objective</td>
                                <td>:</td>
                                <td><asp:TextBox ID="txt_strategicobjective" runat="server" class="longText"></asp:TextBox></td>
                            </tr>
                            <tr>
                                <td>is Active</td>
                                <td>:</td>
                                <td><asp:CheckBox ID="chk_active" runat="server"/></td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </div>
        <br />
        <div id="AuditInformation" class="ui-widget-content padding5px ui-corner-all">
            <b style="margin-left:5px">Audit Information</b>
            <table class="dialogTable">
                <tr>
                    <td width="140px">Last Modified Date</td>
                    <td class="Separator">:</td>
                    <td><asp:TextBox ID="txt_lastmodifieddate" runat="server" ReadOnly="true" class="longText"></asp:TextBox></td>
                </tr>
                <tr>
                    <td>Last Modified By</td>
                    <td>:</td>
                    <td><asp:TextBox ID="txt_lastmodifiedby" runat="server" ReadOnly="true" class="longText"></asp:TextBox></td>
                </tr>
                <tr>
                    <td>Create Date</td>
                    <td>:</td>
                    <td><asp:TextBox ID="txt_createdate" runat="server" ReadOnly="true" class="longText"></asp:TextBox></td>
                </tr>
                <tr>
                    <td>Create By</td>
                    <td>:</td>
                    <td><asp:TextBox ID="txt_createby" runat="server" ReadOnly="true" class="longText"></asp:TextBox></td>
                </tr>
            </table>
        </div>
        <div id="divBrowseGroupKPI" class="ui-widget-content padding5px ui-corner-all">
            <table cellpadding="0" cellspacing="0" border="0" class="display" id="groupkpi">
                <thead>
                    <tr>
                        <th>
                            No
                        </th>
                        <th>
                            Description
                        </th>
                        <th>
                            is Active
                        </th>
                        <th>
                        </th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
        <div id="divBrowseCategoryKPI" class="ui-widget-content padding5px ui-corner-all">
            <table cellpadding="0" cellspacing="0" border="0" class="display" id="categorykpi">
                <thead>
                    <tr>
                        <th>
                            No
                        </th>
                        <th>
                            Description
                        </th>
                        <th>
                            is Active
                        </th>
                        <th>
                        </th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
        <div id="divBrowseTypeKPI" class="ui-widget-content padding5px ui-corner-all">
            <table cellpadding="0" cellspacing="0" border="0" class="display" id="typekpi">
                <thead>
                    <tr>
                        <th>
                            No
                        </th>
                        <th>
                            Description
                        </th>
                        <th>
                            is Active
                        </th>
                        <th>
                        </th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
        <div id="divBrowseSubTypeKPI" class="ui-widget-content padding5px ui-corner-all">
            <table cellpadding="0" cellspacing="0" border="0" class="display" id="subtypekpi">
                <thead>
                    <tr>
                        <th>
                            No
                        </th>
                        <th>
                            Description
                        </th>
                        <th>
                            is Active
                        </th>
                        <th>
                        </th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
        <div id="divBrowseUOM" class="ui-widget-content padding5px ui-corner-all">
            <table cellpadding="0" cellspacing="0" border="0" class="display" id="uom">
                <thead>
                    <tr>
                        <th>
                            No
                        </th>
                        <th>
                            Description
                        </th>
                        <th>
                            is Active
                        </th>
                        <th>
                        </th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
        <div id="divBrowseUOMMax" class="ui-widget-content padding5px ui-corner-all">
            <table cellpadding="0" cellspacing="0" border="0" class="display" id="uommax">
                <thead>
                    <tr>
                        <th>
                            No
                        </th>
                        <th>
                            Description
                        </th>
                        <th>
                            Value
                        </th>
                        <th>
                            is Active
                        </th>
                        <th>
                        </th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
        <div id="divBrowseUOMMin" class="ui-widget-content padding5px ui-corner-all">
            <table cellpadding="0" cellspacing="0" border="0" class="display" id="uommin">
                <thead>
                    <tr>
                        <th>
                            No
                        </th>
                        <th>
                            Description
                        </th>
                        <th>
                            Value
                        </th>
                        <th>
                            is Active
                        </th>
                        <th>
                        </th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
        <div id="divBrowseKPIParent" class="ui-widget-content padding5px ui-corner-all">
            <table cellpadding="0" cellspacing="0" border="0" class="display" id="kpiparent">
                <thead>
                    <tr>
                        <th>
                            No
                        </th>
                        <th>
                            Description
                        </th>
                        <th>
                            is Active
                        </th>
                        <th>
                        </th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
        <div id="divBrowseKPIReplacement" class="ui-widget-content padding5px ui-corner-all">
            <table cellpadding="0" cellspacing="0" border="0" class="display" id="kpireplacement">
                <thead>
                    <tr>
                        <th>
                            No
                        </th>
                        <th>
                            Description
                        </th>
                        <th>
                            is Active
                        </th>
                        <th>
                        </th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
        <br />
        <button id="btn_save" class="ui-button ui-corner-all ui-button ui-state-default ui-button-text-icon-primary" runat="server" name="btnSave">
            <span class="ui-button-icon-primary ui-icon ui-icon-check"></span>
            <label class="ui-button-text">
                Save</label>
        </button>

        <button id="btn_delete" class="ui-button ui-corner-all ui-button ui-state-default ui-button-text-icon-primary" runat="server">
            <span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span>
            <label class="ui-button-text">
                Delete</label>
        </button>
    </form>
</body>
</html>
